
<!DOCTYPE html>
<html lang="en" ng-app>
	<head>
		<meta charset="UTF-8" />
		<title>AZsPCs - Graceful Graphs</title>
		<script type="text/javascript" src="angular-1.0.8.min.js"></script>
		<script type="text/javascript">



function ContestController($scope) {
	$scope.solutions = [];
	var workers = [];
	$scope.now = Date.now();

	var tick = function () {
		$scope.now = Date.now();
		$scope.$apply("$scope.now");
		setTimeout( tick, 1000 - new Date().getMilliseconds());
	}

	setTimeout(tick, 1000 - new Date().getMilliseconds());

	$scope.init = function() {
		var primes = [2,3,5,7,11,13,17,19,23,29,31,37,41,43,47,53,59,61,67,71,73,79,83,89,97];
		$scope.solutions = JSON.parse(localStorage.getItem("solutions"));

		if ($scope.solutions === null) {
			$scope.solutions = [];

			for (var i = 0; i < primes.length; ++i) {
				$scope.solutions.push({ Prime: primes[i], NumEdges: 0, Solution: "", Status: "STOPPED", LastFind: 0 });
			}

			saveSolutions();
		}

		for (var i = 0; i < $scope.solutions.length; ++i) {
			if ($scope.solutions[i].Status === "RUNNING") {
				$scope.solutions[i].LastFind = Date.now();
				$scope.run(i, $scope.solutions[i].Prime, $scope.solutions[i].NumEdges);
			}
		}
	}

	function saveSolutions() {
		localStorage.setItem("solutions", JSON.stringify($scope.solutions));
	}

	$scope.run = function(index, prime, edges) {
		workers[index] = new Worker("GracefulGraphs.js");
		workers[index].onmessage = function(oEvent) {
			if (oEvent.data.solution !== undefined) {
				$scope.solutions[index].Solution = oEvent.data.solution;
				$scope.solutions[index].NumEdges = oEvent.data.e;
				$scope.solutions[index].LastFind = Date.now();
				$scope.now = Date.now();
				$scope.$apply("$scope.solutions");
				workers[index].postMessage({"n":prime, "e": $scope.solutions[index].NumEdges + 1});
			} else {
				$scope.solutions[index].Status = "COMPLETED";
				$scope.$apply("$scope.solutions");
			}

			saveSolutions();
		}
		$scope.solutions[index].LastFind = Date.now();
		$scope.solutions[index].Status = "RUNNING";
		workers[index].postMessage({"n":prime, "e":edges + 1});
	}

	$scope.stop = function(index) {
		workers[index].terminate();
		$scope.solutions[index].Status = "STOPPED";
		saveSolutions();
	}

	$scope.getRowColor = function(solution) {
		var color;

		if (solution.Status === "COMPLETED") {
			color = '#B6DB49';
		} else if (solution.Status === "RUNNING") {
			var seconds = ($scope.now - solution.LastFind) / 1000;
			var luminosity = 50 + (seconds * 5);
			luminosity = (luminosity > 100 ? 95 : luminosity);
			color = 'hsl(192,100%,' + luminosity + '%)';
		} else {
			color = 'white';
		}

		return {'background-color':  color };
	}

	$scope.getRuntime = function(diff) {
		var days = Math.floor(diff / 86400000)
		var hours = Math.floor((diff - days * 86400000) / 3600000);
		var minutes = Math.floor((diff - days * 86400000 - hours * 3600000) / 60000);
		var seconds = Math.floor((diff - days * 86400000 - hours * 3600000 - minutes * 60000) / 1000);
		var runtime = "";

		if (days > 0) {
			runtime = days + " ";
		}

		runtime += hours + ":" + (minutes < 10 ? "0" : "") + minutes + ":" + (seconds < 10 ? "0" : "") + seconds;

		return runtime;
	}
}



		</script>
		<style type="text/css">
			body{margin:0;font-family:sans-serif;}
			table{width:100%;border-collapse:collapse;}
			th{background:#09c;color:#fff;font-size:.6em;}
			th,td{text-align:left;border:solid 1px #09c;padding:.1em}
			th:last-child{width:75%;}
			td:first-child{font-size:2em;cursor: pointer;text-align:center;padding:0;}
			td:last-child{font-size:.5em;}
		</style>
	</head>
	<body ng-controller="ContestController" ng-init="init()">
		<table>
			<thead>
				<tr>
					<th>&nbsp;</th>
					<th># Vertices</th>
					<th># Edges</th>
					<th>Last Find</th>
					<th>Solution</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-style="getRowColor(solution)" ng-repeat="solution in solutions">
					<td>
						<span ng-show="solution.Status == 'STOPPED'" ng-click="run($index, solution.Prime, solution.NumEdges)">&#9658;</span>
						<span ng-show="solution.Status == 'RUNNING'" ng-click="stop($index)">&#9632;</span>
						<span ng-show="solution.Status == 'COMPLETED'">&#10004;</span>
					</td>
					<td>{{solution.Prime}}</td>
					<td>{{solution.NumEdges}}</td>
					<td><span ng-show="solution.Status == 'RUNNING'">{{getRuntime(now - solution.LastFind)}}</span></td>
					<td>{{solution.Solution}}</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>